<template>
      <div id="add_dialog">
            <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="50%"
            center>
            <div class="form">
                  <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <!-- <el-form-item label="代理商名称" prop="pass">
                              <el-input type="text" v-model="FormData.name" ></el-input>
                        </el-form-item> -->
                        
                        <el-form-item label="代理商账户" >
                              <el-input type="text" v-model="FormData.username" :disabled="isEdit" @blur="checkUser" ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" v-if="DialogData.add" >
                              <el-input type="text" v-model="FormData.password" ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" >
                              <el-input type="tel" maxlength="11" @blur="checkPhone" v-model="FormData.phone" ></el-input>
                        </el-form-item>
                        <el-form-item label="代理区域"  v-if="DialogData.edit && !areaEdit">
                              <el-input type="text"  v-model="FormData.area" disabled ></el-input>
                              <el-button type="success" @click="areaEdit = true ">修改</el-button>
                        </el-form-item>
                        <el-form-item label="代理区域" v-if="DialogData.add || areaEdit">
                             <el-cascader
                              v-model="area"
                              :options="options"
                              @change="mapChange"></el-cascader>
                        </el-form-item>
                        <el-form-item label="代理商权限" prop="pass">
                              <el-switch
                                    v-model="isActive"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="开启"
                                    inactive-text="关闭"
                                    active-value="1"
                                    inactive-value="2"
                                    @change="SwitchChange">
                                    </el-switch>
                        </el-form-item>
                        
                  </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="DialogData.show = false">取 消</el-button>
                  <el-button type="primary" @click="SubForm">确 定</el-button>
            </span>
            </el-dialog>
      </div>
</template>

<script>
      import MapData from "@/assets/js/map.js"
      // import allMap from "@/assets/js/allmap.js"
      export default {
            props: {
                  DialogData: Object,
                  FormData: Object,
                  
            },
            computed: {
                  options() {
                        return MapData
                  },
                  token() {
                        return localStorage.miniToken
                  },
                  isEdit() {
                        return this.DialogData.add ? false : true
                  }
            },
            data() {
                  return {
                        isActive: "1",
                        area: [],
                        areaEdit: false,
                  }
            },
            
            mounted() {
                  
            },
            methods: {
                  // 提交表单
                  async SubForm() {
                        this.FormData.token = this.token
                        console.log(this.FormData);
                        
                        if (this.DialogData.add) {
                              let res = await this.$axios.post("/admin/user/agentadd",this.FormData)
                             // console.log(res);
                              if (res.data.code == 202) {
                                    this.$message.success("保存成功!")
                                    this.DialogData.show = false
                                    this.$emit("update")
                              } 
                        } else {
                              delete this.FormData.area
                              let res = await this.$axios.post("/admin/user/agentchange",this.FormData)
                              if (res.data.code == 204) {
                                    this.$message.success("更新成功!")
                                    this.DialogData.show = false
                                    this.$emit("update")
                              } 
                        }
                        
                  },
                  // 区域变化
                  mapChange( e ) {
                        this.options.forEach( el => {
                              if (e[0] == el.adcode) {
                                    this.FormData.province = el.label
                                    if (el.children && e[1]) {
                                          el.children.forEach( item => {
                                                if (e[1] == item.adcode) {
                                                      this.FormData.city = item.label
                                                      if (item.children && e[2]) {
                                                            item.children.forEach( value => {
                                                                  if (e[2] == value.adcode) {
                                                                        this.FormData.county = value.label
                                                                  }
                                                            })
                                                      }
                                                }
                                          })
                                    }
                              }
                        })                       
                  },
                  // switch按钮变化
                  SwitchChange( e ) {
                       // console.log(e);
                        this.FormData.status = e
                  },
                  // 检测手机号码
                  async checkPhone() {
                        let res = this.$isPhone(this.FormData.phone)
                        if (!res) {
                              this.$message.error("手机号码格式错误")
                              this.FormData.phone = ""
                        } else {
                              let isreg = await this.$axios.post("/admin/user/isagentphone", { token: this.token, phone: this.FormData.phone})
                              //console.log(isreg);
                              let code = isreg.data.code
                              if (code == 20007) {
                                    this.$message.error("该手机号已经被注册")
                                    this.FormData.phone = ""
                              }
                              
                        }
                  },
                  // 检测用户是否存在
                  async checkUser() {
                        let res = await this.$axios.post("/admin/user/isagent",{ token: this.token, username: this.FormData.username})
                        //console.log(res);
                        let code  = res.data.code
                        if (code == 206) {
                              this.$message.error("该账户已存在!")
                              this.FormData.username = ""
                        } else {
                              this.$message.success("恭喜,该账户可用!")
                              // this.FormData.username = ""
                        }
                        
                  }
            },
      }
</script>

<style lang="scss" scoped>
.el-input {
      width: 500px;
}
</style>